<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cn">
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="mobile-agent" content="">
    <meta name="applicable-device" content="pc">
    <title>许嵩_搜索 QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
	<link rel="stylesheet" href="static/seek/css/layout_0412.css">
	<link rel="stylesheet" href="static/seek/css/search_6cb3d91b.css">
	<link rel="stylesheet" href="static/seek/css/popup_login.css">
	<link rel="stylesheet" href="static/seek/css/qb-ie-remind.css">
</head>
<body class="os_mac">
    <!-- 头部 N -->
		<jsp:include page="musicTop.jsp"></jsp:include>
   	<!-- 头部 S -->


    <!-- 大搜索框区域 S -->
		<div class="mod_search" style="background-image:url(static/seek/images/bg_search.jpg);" role="search">
		
		<form action="musicFrontQuery/musicFrontQuery_show" method="post">
			<div class="mod_search_input">
				<input class="search_input__input" name="musicName" value="${param.musicName}" type="text" placeholder="搜索音乐、MV、歌单、用户">
				<button class="search_input__btn"><i class="icon_search sprite"></i><span class="icon_txt">搜索</span></button>
			</div>
		</form>
			
			<div class="mod_search_tips">热门搜索：
				<a class="search_tips__item js_smartbox_search">该死的温柔</a>
				<a class="search_tips__item js_smartbox_search">不能说的秘密</a>
				<a class="search_tips__item js_smartbox_search">盗将行</a>
				<a class="search_tips__item js_smartbox_search">林俊杰</a>
				<a class="search_tips__item js_smartbox_search">学到老爱到老</a></div>
			</div>
		</div>
    <!-- 大搜索框区域 E -->
	
    <div class="main" style="">
        <div class="main__inner">
            <!--搜索结果 S-->
            <div class="result">
                <!--直达区 S-->
				<div class="mod_intro mod_intro_singer" id="zhida_singer">		
					<a class="mod_intro__cover js_singer">
                        <img src="#" class="mod_intro__pic mod_intro_singer__pic">
                    </a>
                    <div class="mod_intro__info">
                        <div class="mod_intro__base">
                            <h2 class="mod_intro__title">
                            <a class="mod_intro_singer__singer js_singer" >许嵩</a></h2>
                            <a class="mod_intro_singer__link js_singer">单曲<strong>305</strong></a>
                            <a class="mod_intro_singer__link js_singer">专辑<strong>30</strong></a>
                            <a class="mod_intro_singer__link js_singer">MV<strong>260</strong></a>
                        </div>
                        <div class="mod_intro__toolbar"><button class="mod_btn_green js_singer_radio" ><i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲</button></div>
                    </div></div>
				<div class="mod_intro mod_intro_album" id="zhida_album" style="display:none;"></div>
                <!--直达区 E-->
                <!--结果导航 S-->
                <div class="mod_tab">
                    <a class="mod_tab__item js_tab mod_tab__current">单曲</a>
                    <a class="mod_tab__item js_tab">专辑</a>
                    <a class="mod_tab__item js_tab">MV</a>
                    <a class="mod_tab__item js_tab">歌单</a>
                    <a class="mod_tab__item js_tab">用户</a>
                    <a class="mod_tab__item js_tab">歌词</a>
                </div>
                <!--结果导航 E-->
                <!--结果列表 S-->
                <!-- 单曲 -->
                <div class="js_search_tab_cont search_tab_cont" id="song_box" style="display: block;">
<div class="mod_songlist_toolbar">
	<a class="mod_btn js_all_play"><i class="mod_btn__icon_play"></i>播放全部</a>
	<a class="mod_btn js_all_fav"><i class="mod_btn__icon_add"></i>添加到</a>
	<a class="mod_btn js_all_down"><i class="mod_btn__icon_down"></i>下载</a>
	<a class="mod_btn js_batch"><i class="mod_btn__icon_batch"></i>批量操作</a>
</div>
<div class="mod_songlist">
	<ul class="songlist__header">
	    <li class="songlist__edit songlist__edit--check sprite">
		<input type="checkbox" class="songlist__checkbox js_check_all">
	    </li>
		<li class="songlist__header_name">歌曲</li>
		<li class="songlist__header_author">歌手</li>
		<li class="songlist__header_album">专辑</li>
		<li class="songlist__header_time">时长</li>
	</ul>
	<ul class="songlist__list">
	
	<c:if test="${not empty musicFrontQueryList}">
	<c:forEach items="${musicFrontQueryList}" var="musicFrontQuery">
		<li class="" mid="240463590" ix="0">
		<div class="songlist__item">
		    <div class="songlist__songname">
				<span class="songlist__songname_txt">
					<a class="c_tx_highlight">${musicFrontQuery.musicName}
					<span class="songlist__song_txt"></span>
					</a>
				</span>
				<div class="mod_list_menu">
				    <a href="#" class="list_menu__item list_menu__play js_play">
						<i class="list_menu__icon_play">
							<video id="my-video" class="video-js" controls preload="auto" 
									width="100" 
									height="100">
									<source src="${musicFrontQuery.musicMp3 }" type="video/mp4">
							</video>
						</i>
						<span class="icon_txt">播放</span>
				    </a>
				    <a class="list_menu__item list_menu__add js_fav">
						<i class="list_menu__icon_add"></i>
						<span class="icon_txt">添加到歌单</span>
				    </a>
				    <a class="list_menu__item list_menu__down js_down">
						<i class="list_menu__icon_down"></i>
						<span class="icon_txt">下载</span>
				    </a>
				    <a class="list_menu__item list_menu__share js_share">
						<i class="list_menu__icon_share"></i>
						<span class="icon_txt">分享</span>
				    </a>
				</div>
		    </div>
			<div class="songlist__artist" title="许嵩">
				<a href="singer/list2?musicId=${musicFrontQuery.musicId }&singerId=${musicFrontQuery.singerId}" class="singer_name">
					<span class="js_song">${musicFrontQuery.singerName}</span>
				</a>
		    </div>
		    <div class="songlist__album">
				<a href="special/list2?musicId=${musicFrontQuery.musicId }&specialId=${musicFrontQuery.specialId}" class="album_name">${musicFrontQuery.specialName}</a>
		    </div>
		    <div class="songlist__time">${musicFrontQuery.timeLength}</div>
		</div>
		</li>
	</c:forEach>
	</c:if>
	
	<c:if test="${not empty singerFrontQueryList}">
	<c:forEach items="${singerFrontQueryList}" var="singerFrontQuery">
		<li class="" mid="240463590" ix="0">
		<div class="songlist__item">
		    <div class="songlist__songname">
				<span class="songlist__songname_txt">
					<a class="js_song">${singerFrontQuery.musicName}
					<span class="songlist__song_txt"></span>
					</a>
				</span>
				<div class="mod_list_menu">
				    <a href="#" class="list_menu__item list_menu__play js_play">
						<i class="list_menu__icon_play">
						<video id="my-video" class="video-js" controls preload="auto" 
								width="100" 
								height="100">
								<source src="${singerFrontQuery.musicMp3 }" type="video/mp4">
						</video>
						</i>
						<span class="icon_txt">播放</span>
				    </a>
				    <a class="list_menu__item list_menu__add js_fav">
						<i class="list_menu__icon_add"></i>
						<span class="icon_txt">添加到歌单</span>
				    </a>
				    <a class="list_menu__item list_menu__down js_down">
						<i class="list_menu__icon_down"></i>
						<span class="icon_txt">下载</span>
				    </a>
				    <a class="list_menu__item list_menu__share js_share">
						<i class="list_menu__icon_share"></i>
						<span class="icon_txt">分享</span>
				    </a>
				</div>
		    </div>
			<div class="songlist__artist" title="许嵩">
				<a href="singer/list2?musicId=${singerFrontQuery.musicId }&singerId=${singerFrontQuery.singerId}" class="singer_name">
					<span class="c_tx_highlight">${singerFrontQuery.singerName}</span>
				</a>
		    </div>
		    <div class="songlist__album">
				<a href="special/list2?musicId=${singerFrontQuery.musicId }&specialId=${singerFrontQuery.specialId}" class="album_name">${singerFrontQuery.specialName}</a>
		    </div>
		    <div class="songlist__time">${singerFrontQuery.timeLength}</div>
		</div>
		</li>
	</c:forEach>
	</c:if>
	</ul>
</div>
</div>

				<c:if test="${empty musicFrontQueryList and empty singerFrontQueryList}">
				<!--结果为空 S-->
                <div class="search_tab_cont" id="none_box">
                    <div class="mod_search_none">
                        <p>很抱歉，暂时没有找到与“<span class="c_tx_highlight js_none_keyword"></span>”相关的结果</p>
                        <p>QQ音乐建议你：请检查输入的关键词是否有误或者过长</p>
                        <p>或到<a rel="noopener" target="_blank" class="c_tx_highlight">QQ音乐反馈平台</a>，向我们投诉或提出建议。</p>
                    </div>
                </div>
        		</c:if>
				

                
                <!--结果为空 E-->
	<div class="mod_loading" id="before_page" style="display: none;"><i class="icon_txt">加载中</i></div>
				<!--结果列表 E-->
            <div class="client_guide" id="limitButton"><p class="client_guide__txt">查看更多内容，请下载客户端</p><a class="client_guide__btn js_limitButton">立即下载</a></div></div>
        </div>
    </div>

		<!-- 尾部 N -->
			<jsp:include page="musicFoot.jsp"></jsp:include>
		<!-- 尾部 S -->
</body></html>
